import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import routes from './routes'
const routeList = routes.filter(item => item.meta == null)

function App() {
  return (
    <Router>
      <div className="app">
        <header className="header">
          {
            routes.map((route, key) => <Link to={route.path} key={key}>{route.meta}</Link>)
          }
        </header>
        <div className="container">
          <Switch>
            {
              routes.map((route, key) => {
                return route.exact ? <Route path={route.path} exact key={key} render={props => (<route.component {...props} routes={route.children}/>)}/> :
                  <Route path={route.path} key={key} render={props => (<route.component {...props} routes={route.children}/>)}/>
              })
            }
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;
